<template>
    <view class="top-login">
        <view class="logo" v-if="!vuex_token">
            <view class="s1">
                <image :src="vuex_theme.logo"></image>
                <text>{{ vuex_theme.name }}</text>
            </view>
        	<view class="s2" @click="goLogin()">
        	    <text>登入</text>
        	</view>
        </view>
        
        <view class="logo" v-else>
            <view class="s1 s1-1">
                <image @click="nav_show = true" src="@/static/icon/caidan.png"></image>
                <image :src="vuex_theme.logo"></image>
            </view>
        	<view class="s3" @click="goMy()">
        	    <image :src="vuex_user.avatar"></image>
                <text>{{ vuex_user.nickname }}</text>
                <text v-if="vuex_user.is_shop == 1">商家</text>
                <text v-else>普通用户</text>
        	</view>
        </view>
        
        <u-popup :show="nav_show" @close="onClose" mode='left'>
            <view class="nav">
                <view class="title">
                    <image :src="vuex_theme.logo"></image>
                    <text>超田分享系统</text>
                </view>
                <view class="item" @click="goWeb('Index')" :class="{active: navTitle == 'Index'}">
                    <image v-if="navTitle == 'Index'" src="@/static/icon/index.png"></image>
                    <image v-else src="@/static/icon/index-no.png"></image>
                    <text>首页</text>
                </view>
                <view class="item" @click="goWeb('Shop')" :class="{active: navTitle == 'Shop'}">
                    <image v-if="navTitle == 'Shop'" src="@/static/icon/hd.png"></image>
                    <image v-else src="@/static/icon/hd-no.png"></image>
                    <text>商家活动</text>
                </view>
                <view class="item" @click="goApplyPartnerPage">
                    <image src="@/static/icon/mxvip-no.png"></image>
                    <text>梦想VIP</text>
                </view>
                <view class="item" @click="goWeb('About')" :class="{active: navTitle == 'About'}">
                    <image v-if="navTitle == 'About'" src="@/static/icon/gy.png"></image>
                    <image v-else src="@/static/icon/gy-no.png"></image>
                    <text>关于商家活动系统说明</text>
                </view>
                <view class="item" @click="goActivity()">
                    <image src="@/static/icon/myhd-no.png"></image>
                    <text>我的活动</text>
                </view>
                <view class="item" @click="goReport()">
                    <image src="@/static/icon/ts-no.png"></image>
                    <text>投诉举报</text>
                </view>
                <view class="item" @click="goTel()">
                    <image src="@/static/icon/ts-no.png"></image>
                    <text>联系客服</text>
                </view>
                
                <view class="out" @click="goLogout()">
                    <image src="@/static/icon/out.png"></image>
                    <text>退出</text>
                </view>
            </view>
        </u-popup>
        
    </view>
</template>

<script>
    export default {
        props: {
        	navTitle: {
        		type: String,
        		default: 'Index'
        	}
        },
        data() {
            return {
                nav_show: false,
            };
        },
        methods: {
            goLogin() {
                uni.navigateTo({
                    url: '/pages/my/login'
                })
            },
            goMy() {
                if (this.vuex_token != '') {
                    uni.navigateTo({
                        url: '/pages/my/index'
                    })
                }
            },
            goActivity() {
                if (this.vuex_token != '') {
                    this.nav_show = false;
                    uni.navigateTo({
                        url: '/pages/my/activity'
                    })
                }
            },
            goReport() {
                this.nav_show = false;
                uni.navigateTo({
                    url: '/pages/index/report'
                })
            },
            goTel() {
                uni.navigateTo({
                    url: '/pages/index/wechat'
                })
                // uni.makePhoneCall({
                //     phoneNumber: this.vuex_theme.tel
                // })
            },
            goLogout() {
                uni.setStorageSync('lifeData', {})
                this.$u.vuex('vuex_user', {});
                this.$u.vuex('vuex_token', '');
                this.nav_show = false;
                uni.navigateTo({
                    url: '/pages/index/index'
                })
            },
            goWeb(type) {
                if (type == 'Index') {
                    uni.navigateTo({
                        url: '/pages/index/index'
                    })
                } else if (type == 'Shop') {
                    if (this.vuex_user.is_shop == 1) {
                        uni.navigateTo({
                            url: '/pages/activity/index'
                        })
                    } else {
                        uni.navigateTo({
                            url: '/pages/activity/login'
                        })
                    }
                } else {
                    uni.navigateTo({
                        url: '/pages/index/web?type=' + type
                    })
                }
                this.nav_show = false;
            },
            onClose() {
                this.nav_show = false;
            }
        }
    }
</script>

<style lang="scss">
    .top-login {
        width: 100%;
    }
.logo {
    height: 80rpx;
    margin: 20rpx auto 0 auto;
    @include flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 48rpx;
    padding: 30rpx 32rpx;
    .s1 {
        @include flex;
        align-items: center;
        image {
            width: 60rpx;
            height: 60rpx;
        }
        text {
            height: 80rpx;
            font-size: 40rpx;
            font-weight: 600;
            color: #3D3D3D;
            line-height: 80rpx;
            margin-left: 24rpx;
        }
    }
    .s1-1 {
        image {
            &:nth-child(1) {
                width: 38rpx;
                height: 32rpx;
                margin-right: 32rpx;
            }
        }
    }
    .s2 {
        text {
            height: 80rpx;
            font-size: 32rpx;
            font-weight: 400;
            color: #7677EB;
            line-height: 80rpx;
        }
    }
    .s3 {
        @include flex;
        align-items: center;
        image {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
        }
        text {
            font-size: 24rpx;
            &:nth-child(2) {
                margin: 0 20rpx;
                font-weight: bold;
            }
            &:nth-child(3) {
                color: #7D8592;
            }
        }
    }
}

/deep/ .u-popup {
    &__content {
        background: none;
    }
}
.nav {
    width: 430rpx;
    height: 98vh;
    background-color: #FFFFFF;
    padding-left: 32rpx;
    border-radius: 48rpx;
    margin-top: 1vh;
    position: relative;
    .title {
        height: 80rpx;
        @include flex;
        align-items: center;
        margin-top: 52rpx;
        margin-bottom: 70rpx;
        image {
            width: 60rpx;
            height: 60rpx;
            margin-right: 24rpx;
        }
        text {
            height: 60rpx;
            font-size: 36rpx;
            font-weight: 700;
            color: #3D3D3D;
            line-height: 60rpx;
        }
    }
    .item {
        width: 358rpx;
        height: 48rpx;
        @include flex;
        align-items: center;
        padding: 20rpx 16rpx;
        position: relative;
        image {
            width: 48rpx;
            height: 48rpx;
            margin-right: 24rpx;
        }
        text {
            height: 60rpx;
            font-size: 28rpx;
            color: #7D8592;
            line-height: 60rpx;
        }
    }
    .active {
        background-color: rgba(118, 119, 235, 0.10);
        border-radius: 20rpx;
        &::after {
            content: "";
            position: absolute;
            width: 8rpx;
            height: 88rpx;
            background: #7677EB;
            border-radius: 4rpx;
            opacity: 1;
            right: -42rpx;
            top: 0;
        }
    }
    .out {
        position: absolute;
        bottom: 60rpx;
        @include flex;
        align-items: center;
        image {
            width: 48rpx;
            height: 48rpx;
            margin-right: 24rpx;
        }
        text {
            height: 60rpx;
            font-size: 30rpx;
            color: #7D8592;
            line-height: 60rpx;
        }
    }
}
</style>